<example name="Alert">
  <file type="html">
    <div id="alert"></div>
  </file>

  <file type="js">
   import React from 'react';
   import {render} from 'react-dom';
   import Alert from '@jetbrains/ring-ui/components/alert/alert';

   class AlertDemo extends React.Component {
      state = {
        show: true,
        isClosing: false
      };

      onClose = () => {
        this.setState({show: false});
      }

      onCloseRequest = () => {
        this.setState({isClosing: true});
      }

      render() {
        const {show, isClosing} = this.state;
        if (!show) {
          return null;
        }

        return <Alert
            type={Alert.Type.SUCCESS}
            onClose={this.onClose}
            showWithAnimation={false}
            onCloseRequest={this.onCloseRequest}
            isClosing={isClosing}
          >
            Sample alert
          </Alert>;
      }
   }

   render(<AlertDemo/>, document.querySelector('#alert'));
  </file>
</example>

<example name="Alert Container">
  <file type="html" disable-auto-size>
    <div id="alert-container"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import Alert, {Container} from '@jetbrains/ring-ui/components/alert/alert';

    class AlertContainerDemo extends React.Component {
      state = {
        alerts: [
          {type: Alert.Type.WARNING, key: 1, message: 'Test warning', isClosing: false},
          {type: Alert.Type.MESSAGE, key: 2, message: 'Test message', isClosing: false}
        ]
      };

      yetAnotherMessage = () => {
        this.setState({
          alerts: [{
              type: Alert.Type.MESSAGE,
              key: Date.now(),
              message: 'Another message at ' + new Date()
            },
            ...this.state.alerts
          ]
        });
      }

      onCloseAlert = (closedAlert) => {
        this.setState({
          alerts: this.state.alerts.filter(alert => alert !== closedAlert)
        });
      }

      onCloseAlertClick = (alert) => {
        const alertToClose = this.state.alerts.filter(it => alert.key === it.key)[0]
        alertToClose.isClosing = true;
        this.setState({alerts: [...this.state.alerts]});
      }

      render() {
        return (
          <div>
            <Button onClick={this.yetAnotherMessage}>Create another message</Button>

            <Container>
              {this.state.alerts.map(alert => {
                const {message, ...rest} = alert;
                return (
                  <Alert
                    {...rest}
                    onCloseRequest={() => this.onCloseAlertClick(alert)}
                    onClose={() => this.onCloseAlert(alert)}
                  >
                    {message}
                  </Alert>
                );
              })}
            </Container>
          </div>
        );
      }
    }

    render(<AlertContainerDemo/>, document.getElementById('alert-container'));
  </file>
</example>
